<template>
	<view class="address-container">
		<view class="header">
			<text class="title">收货地址管理</text>
		</view>
		
		<!-- 地址列表 -->
		<view class="address-list">
			<view class="empty-state" v-if="addressList.length === 0">
				<image src="/static/images/empty-address.png" mode="aspectFit"></image>
				<text>暂无收货地址</text>
			</view>
			
			<view 
				class="address-item" 
				v-for="(item, index) in addressList" 
				:key="index"
				:class="{ 'is-default': item.isDefault }"
			>
				<view class="address-info" @click="selectAddress(item)">
					<view class="name-phone">
						<text class="name">{{item.name}}</text>
						<text class="phone">{{item.phone}}</text>
					</view>
					<view class="address-detail">
						<text v-if="item.isDefault" class="default-tag">默认</text>
						<text class="detail-text">{{getFullAddress(item)}}</text>
					</view>
				</view>
				<view class="address-actions">
					<view class="action-btn edit" @click.stop="editAddress(item)">
						<text>编辑</text>
					</view>
					<view class="action-btn delete" @click.stop="deleteAddress(item.id)">
						<text>删除</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 添加新地址按钮 -->
		<view class="add-btn-wrapper">
			<button class="add-btn" @click="addNewAddress">新增收货地址</button>
		</view>
	</view>
</template>

<script>
	import { addressApi } from '@/api/index';
	
	export default {
		data() {
			return {
				addressList: [],
				from: '', // 来源页面，如果是从订单页跳转来，需要选择地址并返回
			}
		},
		onLoad(options) {
			if (options.from) {
				this.from = options.from;
			}
		},
		onShow() {
			// 每次显示页面时获取最新地址列表
			this.getAddressList();
		},
		methods: {
			// 获取地址列表
			async getAddressList() {
				try {
					uni.showLoading({
						title: '加载中...'
					});
					
					const res = await addressApi.getAddressList();
					this.addressList = res.data || [];
					
				} catch (e) {
					console.error('获取地址列表失败', e);
					uni.showToast({
						title: '获取地址列表失败',
						icon: 'none'
					});
				} finally {
					uni.hideLoading();
				}
			},
			
			// 获取完整地址
			getFullAddress(address) {
				return `${address.province} ${address.city} ${address.district} ${address.detail}`;
			},
			
			// 选择地址（从订单页跳转来时使用）
			selectAddress(address) {
				if (this.from === 'order') {
					// 将选中的地址信息传回订单页
					const pages = getCurrentPages();
					const prevPage = pages[pages.length - 2];
					
					// 设置上一页的数据
					prevPage.$vm.selectedAddress = address;
					
					// 返回上一页
					uni.navigateBack();
				}
			},
			
			// 编辑地址
			editAddress(address) {
				uni.navigateTo({
					url: `/pages/user/address-edit?id=${address.id}`
				});
			},
			
			// 新增地址
			addNewAddress() {
				uni.navigateTo({
					url: '/pages/user/address-edit'
				});
			},
			
			// 删除地址
			deleteAddress(id) {
				uni.showModal({
					title: '删除地址',
					content: '确定要删除该收货地址吗？',
					success: async (res) => {
						if (res.confirm) {
							try {
								await addressApi.deleteAddress(id);
								
								uni.showToast({
									title: '删除成功',
									icon: 'success'
								});
								
								// 重新获取地址列表
								this.getAddressList();
							} catch (e) {
								uni.showToast({
									title: '删除失败',
									icon: 'none'
								});
							}
						}
					}
				});
			}
		}
	}
</script>

<style lang="scss">
.address-container {
	padding: 20rpx;
	min-height: 100vh;
	background-color: #f8f8f8;
}

.header {
	padding: 20rpx 0;
	
	.title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
	}
}

.address-list {
	margin-top: 20rpx;
	
	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 100rpx 0;
		
		image {
			width: 200rpx;
			height: 200rpx;
			margin-bottom: 20rpx;
		}
		
		text {
			font-size: 28rpx;
			color: #999;
		}
	}
	
	.address-item {
		background-color: #fff;
		padding: 30rpx;
		border-radius: 15rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
		
		&.is-default {
			border-left: 6rpx solid #FF5151;
		}
		
		.address-info {
			padding-bottom: 20rpx;
			
			.name-phone {
				display: flex;
				align-items: center;
				margin-bottom: 15rpx;
				
				.name {
					font-size: 32rpx;
					font-weight: bold;
					color: #333;
					margin-right: 20rpx;
				}
				
				.phone {
					font-size: 28rpx;
					color: #666;
				}
			}
			
			.address-detail {
				display: flex;
				align-items: center;
				
				.default-tag {
					padding: 2rpx 10rpx;
					background-color: #FF5151;
					color: #fff;
					font-size: 22rpx;
					border-radius: 6rpx;
					margin-right: 10rpx;
				}
				
				.detail-text {
					font-size: 28rpx;
					color: #666;
					line-height: 1.5;
				}
			}
		}
		
		.address-actions {
			display: flex;
			padding-top: 20rpx;
			border-top: 1rpx solid #f5f5f5;
			
			.action-btn {
				padding: 10rpx 30rpx;
				border-radius: 30rpx;
				margin-right: 20rpx;
				
				text {
					font-size: 26rpx;
				}
				
				&.edit {
					background-color: #f5f5f5;
					
					text {
						color: #666;
					}
				}
				
				&.delete {
					background-color: #FFF0F0;
					
					text {
						color: #FF5151;
					}
				}
			}
		}
	}
}

.add-btn-wrapper {
	position: fixed;
	bottom: 30rpx;
	left: 20rpx;
	right: 20rpx;
	
	.add-btn {
		width: 100%;
		height: 90rpx;
		line-height: 90rpx;
		background-color: #FF5151;
		color: #fff;
		font-size: 32rpx;
		border-radius: 45rpx;
	}
}
</style> 